import React, { useState, useRef, useEffect } from 'react';
import { Input, Button, List, Avatar, Card, Space, Tooltip, Switch, message, Spin } from 'antd';
import { SendOutlined, SettingOutlined, ClearOutlined, ReloadOutlined } from '@ant-design/icons';
import '../assets/index.css';

const { TextArea } = Input;

// 公众号头像URL - 使用项目中现有的公众号图片
const PUBLIC_ACCOUNT_AVATAR = '../assets/gzh.jpg';

const AIChatPage = ({ dark }) => {
  // 配置状态
  const [config, setConfig] = useState({
    apiKey: 'sk-nLL6hhHrXyIBqywKX1SM4VL3LC9VKqZJjSPRtDb7xIjnJAkr',
    apiUrl: 'https://lygt-api.aifoundrys.com:7443/v1/chat/completions',
    model: 'DeepSeek-V3',
    showConfig: false
  });
  
  // 消息历史和输入状态
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  
  // 滚动到底部的引用
  const messagesEndRef = useRef(null);
  
  // 系统提示词
  const systemPrompt = `你是专业的小红书AI助手，能够调用各种工具帮助用户完成工作。在执行任务时，你需要遵守以下规则：

数据安全验证：xsec_token 是验证数据安全性的关键。每次调用工具时（如果需要），你必须携带正确的 xsec_token 值，并严格保证数据的对应性和准确性。

安全风控处理：如果连续获取数据失败，可能是触发了网站的安全风控机制。在这种情况下，你需要提醒用户打开MCP助手检查账号情况。在用户确认账号无异常后，你才能继续完成任务。

数据格式选择：工具返回的结果优先以 CSV 格式 提供（整理后的数据），其次是 JSON 格式（原始数据）。你需要根据用户的需求，从结果中提取并提供正确的数据格式。

调用工具格式：特别注意！调用工具请确保传递的参数的类型一致！比如download是boolean类型，则请传递true或者false，而不是"true"等非boolean类型！例如，正确调用格式为：

xml
<tool_use>
<name>tool_MCP_GetHomeFeeds</name>
<arguments>{"count": 5, "category": "homefeed.food_v3", "download": false}</arguments>
</tool_use>

英文输入处理：当用户输入是英文时，你需要先将其翻译成中文。如果翻译结果有多个可能含义或歧义（例如，英文单词可能有多个中文释义），则筛选关联度最高的前3个中文关键词（如果有的话）。然后，使用这些关键词调用小红书搜索工具（如 tool_MCP_Search）进行对应搜索，确保覆盖相关主题。

数据量要求：在获取数据时，前提是数据真实有效，请确保数据样本数量足够多，正常样本至少50个以上。在调用工具时，设置适当的参数（如 count 设置为50或更高）来获取大量数据，但避免过度请求导致风控。

保留原始链接：在获取帖子数据时，确保工具返回的结果中包含原始帖子的链接（例如，在CSV或JSON数据中保留 url 或 link 字段）。这些链接必须作为后续参考依据，在提供数据时一并展示。

你将以中文与用户进行交流，确保沟通顺畅，高效完成任务，输出的结构有层次，美观。`;
  
  // 滚动到最新消息
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };
  
  // 当消息变化时滚动到底部
  useEffect(() => {
    scrollToBottom();
  }, [messages]);
  
  // 保存配置到本地存储
  useEffect(() => {
    const savedConfig = localStorage.getItem('deepseekConfig');
    if (savedConfig) {
      setConfig(prev => ({ ...prev, ...JSON.parse(savedConfig) }));
    }
  }, []);
  
  const saveConfig = (newConfig) => {
    const configToSave = { ...newConfig, showConfig: config.showConfig };
    setConfig(configToSave);
    localStorage.setItem('deepseekConfig', JSON.stringify(configToSave));
  };
  
  // 处理输入变化
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
    setError('');
  };
  
  // 处理配置变化
  const handleConfigChange = (key, value) => {
    saveConfig({ ...config, [key]: value });
  };
  
  // 发送消息
  const sendMessage = async () => {
    if (!inputValue.trim()) {
      return;
    }
    
    if (!config.apiKey || !config.apiUrl) {
      setError('API配置不完整，请检查配置');
      return;
    }
    
    const userMessage = inputValue.trim();
    setInputValue('');
    
    // 添加用户消息到历史记录
    const updatedMessages = [...messages, { role: 'user', content: userMessage }];
    setMessages(updatedMessages);
    setLoading(true);
    setError('');
    
    try {
      // 构建API请求体
      const requestBody = {
        model: config.model,
        messages: [
          { role: 'system', content: systemPrompt },
          ...updatedMessages
        ],
        temperature: 0.7,
        max_tokens: 1500
      };
      
      // 调用DeepSeek API
      const response = await fetch(config.apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${config.apiKey}`
        },
        body: JSON.stringify(requestBody)
      });
      
      if (!response.ok) {
        throw new Error(`API请求失败: ${response.statusText}`);
      }
      
      const data = await response.json();
      
      if (data.choices && data.choices.length > 0) {
        const aiResponse = data.choices[0].message.content;
        setMessages(prev => [...prev, { role: 'assistant', content: aiResponse }]);
      } else {
        throw new Error('没有收到有效的响应');
      }
    } catch (err) {
      console.error('API调用错误:', err);
      setError(`发送失败: ${err.message}`);
      // 添加错误消息到历史记录
      setMessages(prev => [...prev, { 
        role: 'system', 
        content: `错误: ${err.message}\n请检查API配置或网络连接。` 
      }]);
    } finally {
      setLoading(false);
    }
  };
  
  // 处理Enter键发送消息
  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };
  
  // 清空聊天记录
  const clearChat = () => {
    setMessages([]);
    setError('');
    message.success('聊天记录已清空');
  };
  
  // 重新连接
  const reconnect = () => {
    setLoading(true);
    setError('');
    setTimeout(() => {
      setLoading(false);
      message.success('连接已重置');
    }, 1000);
  };
  
  return (
    <Card 
      title={
        <Space style={{ width: '100%', justifyContent: 'space-between' }}>
          <span>小红书AI助手</span>
          <Space>
            <Tooltip title="清空聊天记录">
              <Button 
                icon={<ClearOutlined />} 
                size="small" 
                onClick={clearChat}
                disabled={loading}
              />
            </Tooltip>
            <Tooltip title="重新连接">
              <Button 
                icon={<ReloadOutlined />} 
                size="small" 
                onClick={reconnect}
                disabled={loading}
              />
            </Tooltip>
            <Tooltip title="配置">
              <Button 
                icon={<SettingOutlined />} 
                size="small" 
                onClick={(e) => {
                  e.stopPropagation(); // 阻止事件冒泡
                  const newShowConfig = !config.showConfig;
                  console.log('切换配置面板显示:', newShowConfig);
                  handleConfigChange('showConfig', newShowConfig);
                }}
                disabled={loading}
              />
            </Tooltip>
          </Space>
        </Space>
      } 
      className={`ai-chat-container ${dark ? 'dark-mode' : ''}`}
      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
    >
      {/* 配置面板 - 确保始终可见 */}
      <div className="config-container">
        {config.showConfig && (
          <Card 
            size="small" 
            className="config-panel"
            title="API配置"
            style={{ 
              marginBottom: 16,
              backgroundColor: dark ? '#1f1f1f' : '#fff',
              border: '1px solid #1890ff',
              zIndex: 1000
            }}
          >
          <Space direction="vertical" style={{ width: '100%' }}>
            <div>
              <label style={{ display: 'block', marginBottom: 4 }}>API URL:</label>
              <Input 
                value={config.apiUrl}
                onChange={(e) => handleConfigChange('apiUrl', e.target.value)}
                placeholder="输入DeepSeek API URL"
              />
            </div>
            <div>
              <label style={{ display: 'block', marginBottom: 4 }}>API Key:</label>
              <Input.Password 
                value={config.apiKey}
                onChange={(e) => handleConfigChange('apiKey', e.target.value)}
                placeholder="输入API密钥"
                visibilityToggle
              />
            </div>
            <div>
              <label style={{ display: 'block', marginBottom: 4 }}>模型名称:</label>
              <Input 
                value={config.model}
                onChange={(e) => handleConfigChange('model', e.target.value)}
                placeholder="输入模型名称"
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span>保存配置到本地</span>
              <Switch 
                defaultChecked 
                onChange={() => message.info('配置始终保存在本地浏览器存储中')}
                disabled
              />
            </div>
          </Space>
        </Card>
        )}
      </div>
      
      {/* 错误提示 */}
      {error && (
        <div className="error-message" style={{ color: 'red', marginBottom: 16 }}>
          {error}
        </div>
      )}
      
      {/* 消息列表 */}
      <div 
        className="messages-container" 
        style={{ 
          flex: 1, 
          overflowY: 'auto', 
          marginBottom: 16, 
          padding: 8,
          backgroundColor: dark ? '#1f1f1f' : '#f5f5f5',
          borderRadius: 4
        }}
      >
        {messages.length === 0 ? (
          <div style={{ textAlign: 'center', padding: 20, color: dark ? '#999' : '#666' }}>
            欢迎使用小红书AI助手，请输入您的问题...
          </div>
        ) : (
          <List
            dataSource={messages}
            renderItem={item => (
              <List.Item 
                className={`message-item ${item.role === 'user' ? 'user-message' : 'ai-message'}`}
                style={{ marginBottom: 12, padding: 8, borderRadius: 8 }}
                actions={item.role === 'system' ? [
                  <Button 
                    type="text" 
                    size="small" 
                    danger 
                    onClick={() => {
                      setMessages(prev => prev.filter(m => m !== item));
                    }}
                  >
                    删除
                  </Button>
                ] : []}
              >
                <List.Item.Meta
                  avatar={
                    <Avatar 
                      src={item.role === 'user' ? null : PUBLIC_ACCOUNT_AVATAR} 
                      style={{ 
                        backgroundColor: item.role === 'user' ? '#1890ff' : undefined,
                        border: item.role === 'assistant' ? '2px solid #1890ff' : 'none'
                      }}
                    >
                      {item.role === 'user' ? '用户' : 'AI'}
                    </Avatar>
                  }
                  title={
                    <span style={{ fontSize: 14, marginBottom: 4, display: 'block' }}>
                      {item.role === 'user' ? '您' : '小红书AI助手'}
                    </span>
                  }
                  description={
                    <div 
                      className="message-content" 
                      style={{ 
                        padding: 8, 
                        backgroundColor: item.role === 'user' ? '#e6f7ff' : '#fff',
                        borderRadius: 4,
                        whiteSpace: 'pre-wrap',
                        wordBreak: 'break-word',
                        borderLeft: item.role === 'assistant' ? '3px solid #1890ff' : 'none',
                        color: item.role === 'system' ? 'red' : 'inherit'
                      }}
                    >
                      {item.content}
                    </div>
                  }
                />
              </List.Item>
            )}
          />
        )}
        <div ref={messagesEndRef} />
      </div>
      
      {/* 输入框 */}
      <div className="input-container">
        <TextArea
          rows={3}
          value={inputValue}
          onChange={handleInputChange}
          onPressEnter={handleKeyPress}
          placeholder="输入您的问题...(按Enter发送，Shift+Enter换行)"
          disabled={loading}
          autoSize={{ minRows: 3, maxRows: 6 }}
        />
        <Space style={{ marginTop: 8, float: 'right' }}>
          <Button 
            type="primary" 
            icon={<SendOutlined />} 
            onClick={sendMessage}
            disabled={loading || !inputValue.trim()}
          >
            发送
          </Button>
          {loading && <Spin />}
        </Space>
      </div>
    </Card>
  );
};

export default AIChatPage;